<div>
    <div id="baseinfo">
        <button style="margin: 15px;" (click)="createEpisode()">New Episode</button>
        <button style="margin: 15px;" (click)="createScene()">New Scene</button>
        <button style="margin: 15px;" (click)="createAudience()">New Audience</button>
        <div>{{target['Name']}}</div>
        <div>{{target['Memo']}}</div>
        <div>{{target['Length']}}</div>
        <div>{{target['Version']}}</div>
        <div>{{target['Author']}}</div>
    </div>
    <hr />
    <div>
        <div style="display: flexbox;float: left;" *ngFor="let item of target['Audiences']">
            <div style="display: inline;float: left;">
                <app-audienceview [target]='item'></app-audienceview>
            </div>
        </div>
    </div>
    <hr />
    <div>

        <app-expressstatisticinfo [target]='target'></app-expressstatisticinfo>

    </div>
    <hr />
    <div style="float: none;" [style.width]="twidth">

        <div style="display: flexbox;float: left;" *ngFor="let item of target.Episodes">
            <div style="display: inline;float: left;">
                <app-episodeview [target]='item' [parent]="target" [totalWidth]="twidth"></app-episodeview>
            </div>
        </div>
    </div>
    <hr style="overflow: auto;clear: both;" />
    <div style="overflow: auto;clear: both;">
        <div style="display: flexbox;float: left;" *ngFor="let item of target.Scenes">
            <app-sceneview [target]='item'></app-sceneview>
        </div>
    </div>
</div>